<template>
  <div>
    <el-row>
      <el-col :span="24" class="addRole">
        <!-- 查询 -->
        <el-popover placement="bottom-start" width="1000" style="margin-right:10px;" trigger="click">
          <el-form :inline="true" :model="search">
              <el-form-item label="图纸编号" >
                  <el-input v-model="search.drawCode"></el-input>
              </el-form-item>
              <el-form-item label="生产令号" >
                  <el-input v-model="search.makeNo"></el-input>
              </el-form-item>
              <el-form-item label="任务流水号" >
                  <el-input v-model="search.taskSerialNo"></el-input>
              </el-form-item>
              <el-form-item label="自定义编码" >
                  <el-input v-model="search.code"></el-input>
              </el-form-item>
             <el-form-item label="客户">
                <el-autocomplete  class="width220" v-model="search.customerName" :fetch-suggestions="queryCustomerAsync" placeholder="请输入客户名称" @select="queryhandleSelect"></el-autocomplete>
              </el-form-item> 
              <el-button type="primary" @click="searchBtn">确认</el-button>
              <el-button type="primary" @click="clearQuery">清除</el-button>
          </el-form>
          <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
        <el-button type="primary" @click="showExcelDialog()" v-if="status ==='0'">计划导入</el-button>
        <el-button type="primary" @click="showDialog('insert')">新增</el-button>
      </el-col>
    </el-row>
    <!-- 29所列表 -->
    <tableList29 ref="tableList29" :postData="postData">
      <template v-slot:default="scope">
        <el-button @click="showDialog('update',scope.row)" type="text" size="small">详情</el-button>
      </template>
    </tableList29>
    <!--计划任务详情-->
    <el-dialog class="bodyNopaddingTop" :title="dialog.title" :visible.sync="dialog.isShow"  :close-on-click-modal='false' v-dialogDrag width="1100px" @close='closeDialog' >
      <el-tabs v-model="dialog.activeName" @tab-click="dialogHandleClick">
        <el-tab-pane label="详情" name="1">
          <taskDetail29 :detailObj="dialog.formData" :type="dialog.type" @editSuccess="editSuccess" :editDisalbe="isUpdate"></taskDetail29>
        </el-tab-pane>
        <el-tab-pane label="图纸上传" name="3" v-if="dialog.type==='update'">
          <uploadtemp  :upLoadType="1" :drawNo="dialog.drawCode" @insert-success="handleAvatarSuccess"></uploadtemp>
          <uploadList :upLoadType="1" :drawNo="dialog.drawCode"  ref="drawing"></uploadList>
        </el-tab-pane>
        <el-tab-pane label="工艺上传" name="4" v-if="dialog.type==='update'">
          <uploadtemp  :upLoadType="2" :drawNo="dialog.drawCode" @insert-success="handleAvatarSuccess"></uploadtemp>
           <uploadList :upLoadType="2" :drawNo="dialog.drawCode"  ref="technology"></uploadList>
        </el-tab-pane>
        <el-tab-pane label="图形文件上传" name="5" v-if="dialog.type==='update'">
          <uploadtemp  :upLoadType="3" :drawNo="dialog.drawCode" @insert-success="handleAvatarSuccess"></uploadtemp>
           <uploadList :upLoadType="3" :drawNo="dialog.drawCode"  ref="graphicsFile"></uploadList>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- Excel 导入弹框-->
    <el-dialog class="bodyNopaddingTop" title="excel导入" :visible.sync="excelDialog.isShow" :close-on-click-modal="false" v-dialogDrag >
      <div>
        <el-upload class="upload-excel text-center" drag :action="excelDialog.excelLoadUrl" multiple :limit="1" ref="uploadExcelRef"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
            :on-success="uploadSuccess">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传Excel文件</div>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import salesApi from 'plugins/axios/salesApi.js';
import baseApi from 'plugins/axios/baseApi.js';
import uploadtemp from 'views/components/uploadtemp.vue' /**大文件上传 */
import uploadList from 'views/components/uploadList.vue' /**1-图纸上传、2-工艺上传、3-图形文件上传 的列表组件 */
import tableList29 from 'views/components/tableList29.vue' /**29所列表组件 */
import taskDetail29 from 'views/components/taskDetail29.vue' /**29所任务详情组件 */

export default {
  components: {
    uploadtemp,
    uploadList,
    tableList29,
    taskDetail29
  },
  computed:{
    importStatus(){
      return this.$store.state.importStatus
    },
    importDialog(){
      return this.$store.state.importDialog
    }
  },
  data(){
    return {
      isUpdate:true,
      status:'0',
      postData:{
        isMaterialArrvie:0,
        isMaterialTailor:0
      },
      machineAllList:[],/**所有机器列表 */
      search:{
        drawCode:"",
        makeNo:"",
        taskSerialNo:'',
        customer:'',
        customerName:'',
      },
      dialog:{/**弹框配置 */
        title:'',
        isShow:false,
        type:'',
        formData:{},
        activeName:'2',
        otherUpDataData:{},
        uploadData:{
          drawInfo:"",
        },/**上传图纸需要额外提交的数据 */
        drawCode:''
      },
      pdfActionUrl: baseApi.drawInfoUpload(),
      excelDialog:{
        isShow:false,
        excelLoadUrl:salesApi.uploadExcelUrl(),
      }
    }
  },
  created(){},
  mounted(){
    this.status = this.$route.query.status;
    this.getTablList();
    //查询是否可以编辑
    baseApi.queryUsersByRoleId('63').then(res=>{
      if(res.content){
        this.isUpdate=false;
      }
    })
  },
  watch: {
    $route(){
      this.status = this.$route.query.status;
      this.search.drawCode="";
      this.search.makeNo="";
      this.search.taskSerialNo="";
      this.search.code="";
      this.getTablList();
    }
  },
  methods:{
    /**29所计划列表 */
    getTablList(){
      let self = this;
      self.postData.drawCode=self.search.drawCode;
      self.postData.makeNo=self.search.makeNo;
      self.postData.code=self.search.code;
      self.postData.taskSerialNo=self.search.taskSerialNo;
      self.postData.isFinishSale=self.status;
      self.postData.customer=self.search.customer;
      self.$refs.tableList29.get29TableList()
    },
    searchBtn(){
      this.getTablList();
    },
    showDialog(type,row){
      this.dialog.type =type;
      switch(type){
        case 'insert':
          this.dialog.activeName='1';
          this.dialog.isShow=true;
          this.dialog.formData={
            customerName:{}
          };
          this.dialog.title = '新增计划任务';
          break;
        case 'update':
          this.dialog.activeName='1';
          this.dialog.isShow=true;
          this.dialog.formData = row;
          this.dialog.title = '计划详情';
          this.dialog.drawCode = row.drawCode; 
          this.dialog.otherUpDataData.drawNo=row.drawCode;
          break;
        case 'print':
          this.dialog.activeName='2';
           this.dialog.formData = row;
           this.$refs.print1.getCgPdfData(row.id);
          break;
      } 
    },
    /**修改成功后更新表格关闭弹框*/ 
    editSuccess(){
      this.dialog.isShow=false;
      this.getTablList();
      this.$message.success(`${this.dialog.title}成功`);
    },
    /**详情切换tab*/ 
    dialogHandleClick(){
      let self = this;
      switch(self.dialog.activeName){
         case '3':
           self.$refs.drawing.getTableList();
           self.dialog.otherUpDataData.type=1;
           self.dialog.uploadData.drawInfo = JSON.stringify(self.dialog.otherUpDataData);
          break;
         case '4':
           self.$refs.technology.getTableList();
           self.dialog.otherUpDataData.type=2;
           self.dialog.uploadData.drawInfo = JSON.stringify(self.dialog.otherUpDataData);
          break;
        case '5':
          self.$refs.graphicsFile.getTableList();
          self.dialog.otherUpDataData.type=3;
          self.dialog.uploadData.drawInfo = JSON.stringify(self.dialog.otherUpDataData);
          break;
      }
    },
    beforeAvatarUpload(file){/**文件上传前格式和大小的验证*/
      console.log(file);
      return true;
    },
    /**图纸上传、工艺上传、图形文件上传后执行的方法**/ 
    handleAvatarSuccess(result){
      switch(this.dialog.otherUpDataData.type){
          case 1:
            this.$refs.drawing.getTableList()
            break;
          case 2:
            this.$refs.technology.getTableList();
            break;
          case 3:
            this.$refs.graphicsFile.getTableList();
            break;
        }
    },
    /**关闭弹框*/ 
    closeDialog(){
      this.status!=='1'?this.getTablList():'';
    },
    /**excel导入 */
    showExcelDialog(){
      let self = this;
      if(self.importStatus!=='3'){
          self.$store.commit('updateImportDialog',true)
      }else{
        self.excelDialog.isShow= true;
      }
    },
    uploadSuccess(response, file, fileList){
      console.log(response)
      if(response.statusCode==="200"){
        this.excelDialog.isShow = false;
        this.$refs.uploadExcelRef.clearFiles();
        this.$message.success('上传成功');
      }else{
        this.$message.error(response.desc)
        this.$refs.uploadExcelRef.clearFiles();
      }
    },
     queryCustomerAsync(queryString, callback){
      salesApi.customerInfoListByName({name:queryString?queryString:''}).then(res=>{
        res.content.forEach(item=>{
          item.id=item.code;
          item.value = item.name;
        })
         callback(res.content);
      })
    },
      queryhandleSelect(item){
         this.search.customer= item.id;
    },
    clearQuery(){
      let self=this;
      self.search={
        drawCode:"",
        makeNo:"",
        taskSerialNo:'',
        customer:'',
        customerName:'', 
      }
         self.getTablList();
    },
  }
}
</script>
<style lang="stylus" scoped>
  .addRole
    padding-bottom 10px
</style>
